import React,{useState,useEffect} from "react";
import { useNavigate,useLocation } from "react-router";
import "./common.css"
export function ImageBord({setTitle}){
    let [data,setData]=useState({
        collection:[{
            imageTitle:"百度来的",
            collectionID:"collection1",
            imageSrc:'https://photos.guitu18.com/photos/6e2fdace14149bcf614720ad09a580f4.jpg-jpeg'
        }]
    })
    let stateData=useLocation().state
    const navigate=useNavigate()
    useEffect(()=>{
        if(stateData?.pageTitle){
            setTitle(stateData.pageTitle)
        }
    },[])
    
    function star(collectionID){
        navigate("/imagesDetail",{
            state:{
                collectionID:collectionID
            }
        })
    }
    return <div className="imageBordContainer">
        {
            data.collection.map(imageItem=>{
                return  <div className="imageItem" onClick={()=>{star(imageItem.collectionID)}}>
                            <img className="image" src={imageItem.imageSrc}/>
                            <div className="imagesCollectionName">{imageItem.imageTitle}</div>
                        </div>
            })
        }
    </div>
}